<template>
	<view class="main-page">
		<u-navbar title="车辆出租" :autoBack="true" placeholder></u-navbar>
		<view class="warp">
			<view class="form">
				<u--form labelPosition="left" :model="formData" :rules="rules" ref="uForm" labelWidth="auto" :labelStyle="{fontSize:'26rpx',fontWeight:600}">
					<u-form-item label="租车人" prop="tenant_name" borderBottom>
						<u--input v-model="formData.tenant_name" border="none" placeholder="请输入租车人" inputAlign="right" fontSize="13"></u--input>
					</u-form-item>
					<u-form-item label="租车人手机" prop="tenant_phone" borderBottom>
						<u--input v-model="formData.tenant_phone" border="none" placeholder="请输入租车人手机" inputAlign="right" fontSize="13"></u--input>
					</u-form-item>
					<u-form-item label="租车人身份证正面" prop="tenant_idcard" borderBottom>
						<view class="upload-item">
							<u-upload
								:fileList="tenant_idcard"
								@afterRead="(event) => {afterRead(event, 'tenant_idcard')}"
								@delete="(event) => {deletePic(event, 'tenant_idcard')}"
								name="file"
								:previewFullImage="true"
								:maxCount="1"
							></u-upload>
						</view>
					</u-form-item>
					<u-form-item label="租车人身份证背面" prop="tenant_idcard_back" borderBottom>
						<view class="upload-item">
							<u-upload
								:fileList="tenant_idcard_back"
								@afterRead="(event) => {afterRead(event, 'tenant_idcard_back')}"
								@delete="(event) => {deletePic(event, 'tenant_idcard_back')}"
								name="file"
								:previewFullImage="true"
								:maxCount="1"
							></u-upload>
						</view>
					</u-form-item>
					<u-form-item label="同乘人数" prop="person_num" borderBottom>
						<u--input v-model="formData.person_num" border="none" placeholder="请输入同乘人数" inputAlign="right" fontSize="13"></u--input>
					</u-form-item>
					<u-form-item label="取车地点" prop="start_address" borderBottom>
						<u--input v-model="formData.start_address" border="none" placeholder="请输入取车地点" inputAlign="right" fontSize="13"></u--input>
					</u-form-item>
					<u-form-item label="目的地" prop="destination" borderBottom>
						<u--input v-model="formData.destination" border="none" placeholder="请输入目的地" inputAlign="right" fontSize="13"></u--input>
					</u-form-item>
					<u-form-item label="预计还车地点" prop="end_address" borderBottom>
						<u--input v-model="formData.end_address" border="none" placeholder="请输入预计还车地点" inputAlign="right" fontSize="13"></u--input>
					</u-form-item>
					<u-form-item label="租车时长" prop="daylen" borderBottom>
						<u--input v-model.number="formData.daylen" border="none" placeholder="请输入租车时长" inputAlign="right" fontSize="13"></u--input>
					</u-form-item>
					<u-form-item label="租车单价" prop="price" borderBottom>
						<u--input v-model.number="formData.price" border="none" placeholder="请输入租车单价" inputAlign="right" fontSize="13"></u--input>
					</u-form-item>
					<u-form-item label="租车总额" prop="amount" borderBottom>
						<u--input v-model.number="formData.amount" border="none" placeholder="请输入租车总额" inputAlign="right" fontSize="13"></u--input>
					</u-form-item>
					<u-form-item label="里程" prop="start_mileage" borderBottom>
						<u--input v-model="formData.start_mileage" border="none" placeholder="请输入租车时里程" inputAlign="right" fontSize="13"></u--input>
					</u-form-item>
					<u-form-item label="租车时油量" prop="start_petrol" borderBottom>
						<view class="upload-item">
							<u-upload
								:fileList="start_petrol"
								@afterRead="(event) => {afterRead(event, 'start_petrol')}"
								@delete="(event) => {deletePic(event, 'start_petrol')}"
								name="file"
								:previewFullImage="true"
								:maxCount="1"
							></u-upload>
						</view>
					</u-form-item>
					<u-form-item label="租车时磕碰图片" prop="start_images" borderBottom>
						<view class="upload-item">
							<u-upload
								:fileList="start_images"
								@afterRead="(event) => {afterRead(event, 'start_images')}"
								@delete="(event) => {deletePic(event, 'start_images')}"
								name="file"
								:previewFullImage="true"
								:maxCount="9"
							></u-upload>
						</view>
					</u-form-item>
					<u-form-item label="来源途径" prop="form_type" borderBottom @click="showModal = 'form_type'">
						<u--input :value="selShows.form_type" border="none" readonly placeholder="请输入来源途径" inputAlign="right" fontSize="13"></u--input>
						<u-icon slot="right" name="arrow-right" ></u-icon>
					</u-form-item>
					<u-form-item label="保险" prop="insure_status" borderBottom>
						<u-switch v-model="formData.insure_status" activeValue="1" inactiveValue="2"></u-switch>
					</u-form-item>
					<u-form-item label="保险渠道" prop="insure_form" borderBottom @click="showModal = 'insure_form'">
						<u--input :value="selShows.insure_form" border="none" readonly placeholder="请输入保险渠道" inputAlign="right" fontSize="13"></u--input>
						<u-icon slot="right" name="arrow-right" ></u-icon>
					</u-form-item>
					<u-form-item label="保险类型" prop="insure_type" borderBottom>
						<u--input v-model="formData.insure_type" border="none" placeholder="请输入保险类型" inputAlign="right" fontSize="13"></u--input>
					</u-form-item>
					
					<u-form-item label="备注" prop="remark" borderBottom>
						<u--textarea v-model="formData.remark" placeholder="请输入备注" ></u--textarea>
					</u-form-item>
					<view class="btn-item">
						<u-button class="bg-linear-main" type="primary" shape="circle" text="确认租车" @tap="submit"></u-button>
					</view>
				</u--form>
			</view>
		</view>
		<u-action-sheet :show="showModal == 'form_type'" :actions="selActions.form_type" title="请选择来源途径" @close="showModal = ''" @select="(event) => { sheetSelect(event, 'form_type') }" > </u-action-sheet>
		<u-action-sheet :show="showModal == 'insure_form'" :actions="selActions.insure_form" title="请选择保险渠道" @close="showModal = ''" @select="(event) => { sheetSelect(event, 'insure_form') }" > </u-action-sheet>
	</view>
</template>

<script>
	import { get_banner, productCategory, subOrder } from '@/common/api.js'
	import upload from '@/common/upload.js'
	
	export default {
		data() {
			return {
				banners: [],
				categorys: [],
				images: [],
				formData: {
					car_id: '',
					tenant_name: '',
					tenant_phone: '',
					tenant_idcard: '',
					tenant_idcard_back: '',
					person_num: '',
					start_address: '',
					destination: '',
					end_address: '',
					daylen: '',
					price: '',
					amount: '',
					start_mileage: '',
					start_petrol: '',
					start_images: [],
					form_type: '',
					insure_status: '',
					insure_form: '',
					insure_type: '',
					remark: '',
				},
				selectShow: {
					category_id: ''
				},
				rules: {
					tenant_name: {type: 'string',required: true,message: '请输入租车人姓名',trigger: ['blur', 'change']},
					tenant_phone: {type: 'string',required: true,message: '请输入租车人手机号',trigger: ['blur', 'change']},
					tenant_idcard: {type: 'string',required: true,message: '请上传身份证正面',trigger: ['blur', 'change']},
					tenant_idcard_back: {type: 'string',required: true,message: '请上传身份证背面',trigger: ['blur', 'change']},
					person_num: {type: 'string',required: true,message: '请输入同乘人数',trigger: ['blur', 'change']},
					start_address: {type: 'string',required: true,message: '请输入取车地点',trigger: ['blur', 'change']},
					destination: {type: 'string',required: true,message: '请输入目的地',trigger: ['blur', 'change']},
					end_address: {type: 'string',required: true,message: '请输入预计还车地点',trigger: ['blur', 'change']},
					daylen: {type: 'number',required: true,message: '请输入租车时长',trigger: ['blur', 'change']},
					price: {type: 'number',required: true,message: '请输入单价',trigger: ['blur', 'change']},
					amount: {type: 'number',required: true,message: '请输入总额',trigger: ['blur', 'change']},
					start_mileage: {type: 'string',required: true,message: '请输入租车时里程',trigger: ['blur', 'change']},
					start_petrol: {type: 'string',required: true,message: '请上传租车时油量',trigger: ['blur', 'change']},
					form_type: {type: 'string',required: true,message: '请选择来源途径',trigger: ['blur', 'change']},
				},
				showModal: '',
				tenant_idcard: [],
				tenant_idcard_back: [],
				start_petrol: [],
				start_images: [],
				selShows: {
					form_type: '',
					insure_form: ''
				},
				selActions: {
					form_type: [],
					insure_form: [],
				}
			}
		},
		onLoad(params) {
			this.formData.car_id = params.car_id;
			console.log('this.formData.car_id', this.formData.car_id);
			this.selActions.form_type = this.Enums.toArray('OrderFormType');
			this.selActions.insure_form = this.Enums.toArray('InsureForm');
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules)
		},
		methods: {
			async afterRead(event, field) {
				const file = event.file
				this[field].splice(event.index, 1, {
					...file,
					status: 'uploading',
					message: '上传中'
				})
				const result = await upload({filePath: file.url})
				switch(field){
					case 'tenant_idcard':
					case 'tenant_idcard_back':
					case 'start_petrol':
						this.formData[field] = result.file.url;
					break;
					case 'start_images':
						this.formData[field].splice(event.index, 1, result.file.url);
					break;
				}
				this[field].splice(event.index, 1, {...file,status: 'success', message: '', url: result.file.url})
			},
			deletePic(event, field){
				switch(field){
					case 'tenant_idcard':
					case 'tenant_idcard_back':
					case 'start_petrol':
						this.formData[field] = "";
					break;
					case 'start_images':
						this.formData[field].splice(event.index, 1);
					break;
				}
			},
			sheetSelect(event, field){
				this.selShows[field] = event.name;
				this.formData[field] = event.id;
			},
			submit(){
				this.$refs.uForm.validate().then(res => {
					// uni.$u.toast('校验通过')
					const params = {...this.formData}
					uni.showLoading()
					subOrder(params).then(res => {
						uni.switchTab({
							url: '/pages/home/index'
						})
					}).finally(() => {
						uni.hideLoading()
					})
				}).catch(errors => {
					// uni.$u.toast('校验失败')
				})
			}
		}
	}
</script>

<style lang="scss">
	.swiper-container { position: fixed; z-index: 0;left: 0; top: 0;right: 0;}
	.warp { position: relative; z-index: 1; border-top-left-radius: 40rpx; border-top-right-radius: 40rpx;}
	.form {
		background-color: #ffffff; padding: 20rpx; border-top-left-radius: 20rpx; border-top-right-radius: 20rpx; padding-bottom: 100rpx;
		.btn-item { position: fixed; bottom: 15rpx; left: 15rpx; right: 15rpx;}
	}
</style>
